<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="form">
					<wd-form ref="formRef" :model="formData" :rules="formRules">
						<view class="form-item">

							<wd-cell :required="formRules['medicalExpenses'][0].required" title="医疗费（元）" vertical>
								<wd-input v-model="formData.medicalExpenses" prop="medicalExpenses"
									placeholder="请输入医疗费" />
							</wd-cell>
						</view>

						<view class="form-item">
							<wd-cell :required="formRules['monthlySalary'][0].required" title="月工资（元）" vertical>
								<wd-input v-model="formData.monthlySalary" prop="monthlySalary" placeholder="请输入月工资" />
							</wd-cell>
						</view>
						<view class="form-item">
							<wd-cell :required="formRules['lostTime'][0].required" title="误工时间（天）" vertical>
								<wd-input v-model="formData.lostTime" prop="lostTime" placeholder="请输入误工时间" />
							</wd-cell>
						</view>

						<view class="form-item">
							<wd-cell :required="formRules['nursingWorker'][0].required" title="护工年工资（元）" vertical>
								<wd-input v-model="formData.nursingWorker" prop="nursingWorker"
									placeholder="请输入护工年工资" />
							</wd-cell>
						</view>
						<view class="form-item">
							<wd-cell :required="formRules['nursingDays'][0].required" title="护理天数" vertical>
								<wd-input v-model="formData.nursingDays" prop="nursingDays" placeholder="请输入护理天数" />
							</wd-cell>
						</view>

						<view class="form-item">
							<wd-cell :required="formRules['nutritionSubsidies'][0].required" title="营养补助标准（元/天）"
								vertical>
								<wd-input v-model="formData.nutritionSubsidies" prop="nutritionSubsidies"
									placeholder="请输入营养补助标准" />
							</wd-cell>
						</view>
						<view class="form-item">
							<wd-cell :required="formRules['nutritionalPeriod'][0].required" title="营养期（天）" vertical>
								<wd-input v-model="formData.nutritionalPeriod" prop="nutritionalPeriod"
									placeholder="请输入营养期" />
							</wd-cell>
						</view>

						<view class="form-item">
							<wd-cell :required="formRules['hospitalFood'][0].required" title="住院伙食补助费（元/天）" vertical>
								<wd-input v-model="formData.hospitalFood " prop="hospitalFood"
									placeholder="请输入住院伙食补助费" />
							</wd-cell>
						</view>
						<view class="form-item">
							<wd-cell :required="formRules['hospitalizationPeriod'][0].required" title="住院期（天）" vertical>
								<wd-input v-model="formData.hospitalizationPeriod" prop="hospitalizationPeriod"
									placeholder="请输入住院天数" />
							</wd-cell>
						</view>


						<view class="form-item">
							<wd-cell :required="formRules['subsequentTreatment'][0].required" title="后续治疗费（元）" vertical>
								<wd-input v-model="formData.subsequentTreatment" prop="subsequentTreatment"
									placeholder="请输入后续治疗费" />
							</wd-cell>
						</view>


						<view class="form-item">
							<wd-cell :required="formRules['transportationExpenses'][0].required" title="交通费（元）"
								vertical>
								<wd-input v-model="formData.transportationExpenses" prop="transportationExpenses"
									placeholder="请输入交通费" />
							</wd-cell>
						</view>

						<view class="form-item">
							<wd-cell :required="formRules['spiritualCompensation'][0].required" title="精神损害赔偿（元）"
								vertical>
								<wd-input v-model="formData.spiritualCompensation" prop="spiritualCompensation"
									placeholder="请输入精神损害赔偿" />
							</wd-cell>
						</view>


						<view class="form-item">
							<wd-cell :required="formRules['disabledEquipment'][0].required" title="残疾辅助器具费（元）" vertical>
								<wd-input v-model="formData.disabledEquipment" prop="disabledEquipment"
									placeholder="请输入残疾辅助器具费" />
							</wd-cell>
						</view>

						<view class="form-item">
							<wd-cell :required="formRules['disabilityCompensation'][0].required" title="伤残赔偿（元）"
								vertical>
								<wd-input v-model="formData.disabilityCompensation" prop="disabilityCompensation"
									placeholder="请输入伤残赔偿" />
							</wd-cell>
						</view>
						<!-- <wd-picker clearable prop="type" :columns="caseTypeList" v-model="formData.type"
							custom-class="wd-picker-custom-class-fd-col square bg-transparent" label="选择案件类型：" />
						<wd-picker clearable prop="involve" :columns="amountInvolved" v-model="formData.involve"
							custom-class="wd-picker-custom-class-fd-col square bg-transparent" label="是否涉及财产：" />
						<view class="form-item" v-if="formData.involve === '是'">
							<wd-cell required title="涉及资产（元）" vertical>
								<wd-input v-model="formData.money" prop="money" placeholder="请输入涉及资产" />
							</wd-cell>
						</view> -->
					</wd-form>
				</view>

				<view class="footer">
					<wd-button @click="calculate" type="success"
						custom-class="wd-button-custom-class-my-success square wd-button-custom-class-w100">
						计算
					</wd-button>
				</view>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, reactive, ref } from 'vue';

	import { onPageScroll, onLoad } from '@dcloudio/uni-app';
	import useRouter from '@/hooks/useRouter';



	export default defineComponent({
		name: '',
		components: {},
		setup(props, ctx) {
			// 日间light、夜间dark主题
			const theme = ref('light');
			const router = useRouter();
			const formRef = ref();
			const formData = reactive({
				medicalExpenses: "",
				monthlySalary: "",
				lostTime: "",
				nursingWorker: "",
				nursingDays: "",
				nutritionSubsidies: "",
				nutritionalPeriod: "",
				hospitalFood: "",
				hospitalizationPeriod: "",
				subsequentTreatment: "",
				transportationExpenses: "",
				spiritualCompensation: "",
				disabledEquipment: "",
				disabilityCompensation: "",
			})
			const formRules = reactive({
				medicalExpenses: [
					{ required: true, message: '请输入医疗费', trigger: 'blur' }
				],
				monthlySalary: [
					{ required: true, message: '请输入月工资', trigger: 'blur' }
				],
				lostTime: [
					{ required: true, message: '请输入误工时间', trigger: 'blur' }
				],
				nursingWorker: [
					{ required: true, message: '请输入护工年工资', trigger: 'blur' }
				],
				nursingDays: [
					{ required: true, message: '请输入护理天数', trigger: 'blur' }
				],
				nutritionSubsidies: [
					{ required: true, message: '请输入营养补助标准', trigger: 'blur' }
				],
				nutritionalPeriod: [
					{ required: true, message: '请输入营养期', trigger: 'blur' }
				],
				hospitalFood: [
					{ required: true, message: '请输入住院伙食补助费', trigger: 'blur' }
				],
				hospitalizationPeriod: [
					{ required: true, message: '请输入住院天数', trigger: 'blur' }
				],
				subsequentTreatment: [
					{ required: false, message: '请输入后续治疗费', trigger: 'blur' }
				],
				transportationExpenses: [
					{ required: false, message: '请输入交通费', trigger: 'blur' }
				],
				spiritualCompensation: [
					{ required: false, message: '请输入精神损害赔偿', trigger: 'blur' }
				],
				disabledEquipment: [
					{ required: false, message: '请输入残疾辅助器具费', trigger: 'blur' }
				],
				disabilityCompensation: [
					{ required: false, message: '请输入伤残赔偿', trigger: 'blur' }
				],

			})

			const calculate = () => {
				formRef.value.validate().then(({ err, valid }) => {
					if (valid) {
						// 计算逻辑...
						let {
							monthlySalary,
							lostTime,
							nursingWorker,
							nursingDays,
							nutritionSubsidies,
							nutritionalPeriod,
							hospitalFood,
							hospitalizationPeriod,
							medicalExpenses,
							subsequentTreatment,
							transportationExpenses,
							spiritualCompensation,
							disabledEquipment,
							disabilityCompensation, } = formData
						// 误工费
						let lostCost = (Number(monthlySalary) / 30 * Number(lostTime)).toFixed(2);
						// 护理费
						let nursingCost = (Number(nursingWorker) / 365 * Number(nursingDays)).toFixed(2);
						// 营养费
						let nutritionCost = (Number(nutritionSubsidies) * Number(nutritionalPeriod)).toFixed(2);
						// 住院伙食补助
						let hospitalCost = (Number(hospitalFood) * Number(hospitalizationPeriod)).toFixed(2);


						router.push({
							url: "/tools/indemnify/result",
							params: {
								medicalExpenses: medicalExpenses || 0,
								subsequentTreatment: subsequentTreatment || 0,
								transportationExpenses: transportationExpenses || 0,
								spiritualCompensation: spiritualCompensation || 0,
								disabledEquipment: disabledEquipment || 0,
								disabilityCompensation: disabilityCompensation || 0,
								lostCost: lostCost || 0,
								nursingCost: nursingCost || 0,
								nutritionCost: nutritionCost || 0,
								hospitalCost: hospitalCost || 0,
							},
						})



					}
				})

			}
			return {
				theme,
				formData,
				formRules,
				formRef,
				calculate,
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	.container {
		padding: 24rpx;
		background-color: #f2f2f2;

		.form {
			.checkbox {
				padding: 18rpx;
			}


			.form-item {
				padding: 18rpx !important;
				border-radius: 14rpx;
				overflow: hidden;

				:deep(.wd-textarea) {
					padding: 24rpx;
					border-radius: 14rpx;
				}

				:deep(.wd-input) {
					padding: 0 24rpx;
					border-radius: 14rpx;

					.wd-input__inner {
						height: 44px;
						line-height: 44px;
					}
				}

				:deep(.wd-cell) {
					background-color: transparent;
					padding-left: 0;

					.wd-cell__wrapper {
						padding-right: 0;
						padding: 0;
					}

					.wd-cell__right {
						margin-top: 20rpx;
					}

					.wd-cell__wrapper.is-vertical .wd-cell__value {
						max-width: 100%;
					}

					.wd-cell__body {
						// background-color: #FFF;
						border-radius: 14rpx;
					}
				}

			}
		}

		.result {
			margin: 18rpx;
			width: calc(100% - 18rpx - 18rpx);
			overflow: hidden;
		}

		.footer {
			margin-top: 24rpx;
			padding: 18rpx;
		}
	}
</style>